{% extends 'base-layer.html' %}
{% load staticfiles %}
{% block css %}
    <link rel="stylesheet" href="{% static 'plugins/select2/select2.min.css' %}">
{% endblock %}

{% block main %}
    <div class="box box-danger">
        <form class="form-horizontal" id="selectUsersForm" method="post">
            {% csrf_token %}
            <input type="hidden" name="id" value="{{ role.id }}">
            <div class="box-body">
                <div class="row">
                    <div class="col-xs-5">
                        <label class="control-label">可选用户</label>
                        <select name="from" id="multiselect" class="form-control"
                                size="18" multiple="multiple">
                            {% for item in un_add_users %}
                                <option value="{{ item.id }}">{{ item.name }}({{ item.username }})</option>
                            {% endfor %}
                        </select>
                    </div>


                    <div class="col-xs-2">
                        <br><br><br><br><br><br>
                        <button type="button" id="multiselect_rightAll" class="btn btn-block">
                        <i class="glyphicon glyphicon-forward"></i>
                        </button>
                        <button type="button" id="multiselect_rightSelected" class="btn btn-block">
                        <i class="glyphicon glyphicon-chevron-right"></i>
                        </button>
                        <button type="button" id="multiselect_leftSelected" class="btn btn-block">
                        <i class="glyphicon glyphicon-chevron-left"></i>
                        </button>
                        <button type="button" id="multiselect_leftAll" class="btn btn-block">
                        <i class="glyphicon glyphicon-backward"></i>
                        </button>
                    </div>


                    <div class="col-xs-5">
                        <label class="control-label">{{ structure.name }}-已绑定用户</label>
                        <select name="to" id="multiselect_to" class="form-control"
                                size="18" multiple="multiple">
                            {% for item in added_users %}
                                <option value="{{ item.id }}">{{ item.name }}({{ item.username }})</option>
                            {% endfor %}
                        </select>
                    </div>
                </div>

                <div class="row">
                    <div class="col-xs-12 margin-top-5">
                        <p class="text-maroon">*注意：一个用户可以添加多个角色，继承多个角色的权限</p>
                    </div>
                </div>
            </div>

            <div class="box-footer">
                <div class="row span7 text-center">
                    <button type="button" id="btnCancel" class="btn btn-default margin-right">重置</button>
                    <button type="button" id="btnSave" class="btn btn-info margin-right">保存</button>
                </div>
            </div>
        </form>
    </div>

{% endblock %}

{% block javascripts %}
    <script src="{% static 'plugins/select/multiselect.min.js' %}"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            //初始化多选列表
            $("#multiselect").multiselect({
                search:{
                    left:'<input type="text" class="form-control" placeholder="Search....">',
                    right:'<input type="text" class="form-control" placeholder="Search....">',
                },
                fireSearch:function (value) {
                    return value.length>3;
                }
            });
        });

        $("#btnSave").click(function () {
           $("#multiselect_to option").prop('selected',true);
           var data=$("#selectUsersForm").serialize();
           console.log(data);
           $.ajax({
               type:$("#selectUsersForm").attr('method'),
               url:"{% url 'system:rbac-role-role2user' %}",
               data:data,
               cache:false,
               success:function (msg) {
                   if (msg.result) {
                       layer.alert('操作成功',{icon:1});
                   } else {
                       layer.alert('操作失败',{icon:2});
                   }
                   return ;
               }
           });
        });

        $("#btnCancel").click(function () {
            window.location.reload();
        });

    </script>

{% endblock %}